<template>
    <div>
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <el-cascader placeholder="请选择您所在的区服" v-model="formData.selectedServer" :options="serverTree"
                    style="width: 200px;margin-bottom: 10px;" />
                <!-- <div class="handle" @click="showServerPicker">
                <div class="selected-tag">
                    {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>

            <!-- 代练类型 -->
            <div class="form-item" v-if="formData.orderType != '限时订单'">
                <text class="label">代练类型</text>
                <el-select v-model="formData.selectedMode" placeholder="请选择代练类型" size="large"
                    style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in modeTree" :key="index" :label="item.text" :value="item.value" />
                </el-select>
                <!-- <div class="handle" @click="showModePicker">
                <div class="selected-tag">
                    {{ selectedMode || '请选择代练类型' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>

            <!-- 订单类别 -->
            <div class="form-item"
                v-if="formData.selectedMode != '荣耀战力' && formData.selectedMode != '大国标' && formData.selectedMode != '小国标'">
                <text class="label">订单类别</text>
                <el-select v-model="formData.orderType" placeholder="请选择订单类别" size="large"
                    style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in orderTypeTree" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
                <!-- <div class="handle" @click="showOrderTypePicker">
                <div class="selected-tag">
                    {{ orderType || '请选择订单类别' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 当前段位 -->
            <div class="form-item"
                v-if="formData.orderType == '限时订单' || formData.orderType == '全胜订单' && formData.selectedMode != '巅峰赛' || formData.selectedMode == '荣耀战力' || formData.selectedMode == '大国标' || formData.selectedMode == '小国标'">
                <text class="label">当前段位</text>
                <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                    style="width: 200px;margin-bottom: 10px;" />
                <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <div class="selected-tag">

                    {{ (currentTask === '') ? '请选择角色当前的段位' :
                        `${currentTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 需打场次 -->
            <div class="form-item" v-if="formData.orderType == '全胜订单' && formData.selectedMode != '荣耀战力'">
                <text class="label">需打场次</text>
                <el-select v-model="formData.needGames" placeholder="请选择需打场次" size="large"
                    style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in needGamesTree" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
                <!-- <div class="handle" @click="showNeedGamesPicker">
                <div class="selected-tag">

                    {{ (needGames === '') ? '请选择需打场次' :
                        `${needGames}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 终止时间 -->
            <div class="form-item" v-if="formData.orderType == '限时订单'">
                <text class="label">终止时间</text>
                <el-date-picker v-model="formData.endTime" type="datetime" placeholder="请选择订单终止时间" />
                <!-- <div class="handle" @click="showEndTimePicker">
                <div class="selected-tag">

                    {{ (tomorrow === '' && endTime === '') ? '请选择订单终止时间' :
                        `${tomorrow} ${endTime}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 订单删除时间 -->
            <div class="form-item" v-if="formData.orderType == '限时订单'">
                <text class="label">订单删除时间</text>
                <el-date-picker v-model="formData.orderDeleteTime" type="datetime" placeholder="请选择订单删除时间" />
                <!-- <div class="handle" @click="showOrderDeleteTimePicker">
                <div class="selected-tag">

                    {{ (tomorrow === '' && orderDeleteTime === '') ? '请选择订单终止时间' :
                        `${tomorrow} ${orderDeleteTime}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 英雄名称 -->
            <!-- <div class="form-item"
                v-if="formData.selectedMode == '荣耀战力' || formData.selectedMode == '大国标' || formData.selectedMode == '小国标'">
                <text class="label">英雄名称</text>
                <el-select filterable :filter-method="heroFilterMethod" v-model="formData.hero" placeholder="请选择英雄名称"
                    size="large" style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in filteredHeroes" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
            </div> -->
            <!-- 拿标时间 -->
            <div class="form-item" v-if="formData.selectedMode == '大国标' || formData.selectedMode == '小国标'">
                <text class="label">拿标时间</text>
                <el-select v-model="formData.selectedBidTime" placeholder="请选择您的拿标时间" size="large"
                    style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in bidTimeTree" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
                <!-- <div class="handle" @click="showBidTimePicker">
                <div class="selected-tag">
                    {{ (selectedBidTime === '') ? '请选择您的拿标时间' :
                        selectedBidTime
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 当前战力 -->
            <div class="form-item" v-if="formData.selectedMode == '大国标' || formData.selectedMode == '小国标'">
                <text class="label">当前战力</text>
                <el-input v-model="formData.currentPower" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入当前战力" />
                <!-- <div class="handle" @click="showPowerPicker">
                <div class="selected-tag">
                    {{ (formData.currentPower === '') ? '请输入当前战力' :
                        formData.currentPower
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 代练任务（荣耀战力） -->
            <div class="form-item" v-if="formData.selectedMode == '荣耀战力'">
                <text class="label">代练任务</text>
                <el-input v-model="formData.currentPower" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入当前战力" />
                <el-input v-model="formData.toPower" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入目标战力" />
                <!-- <div class="handle" @click="showPowerPicker">
                <div class="selected-tag">
                    {{ (formData.currentPower === '' && formData.toPower === '') ? '请输入当前战力和目标战力' :
                        `战力${formData.currentPower}分-${formData.toPower}分`
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 铭文等级 -->
            <div class="form-item"
                v-if="formData.selectedMode == '荣耀战力' || formData.selectedMode == '大国标' || formData.selectedMode == '小国标'">
                <text class="label">铭文等级</text>
                <el-input v-model="formData.mingwenLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入铭文等级" />
                <!-- <div class="handle" @click="showRoleTypePicker">
                <div class="selected-tag">
                    {{ (formData.mingwenLevel === '') ? '请输入铭文等级' :
                        formData.mingwenLevel
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 角色信息 -->
            <div class="form-item"
                v-if="formData.selectedMode != '荣耀战力' && formData.selectedMode != '大国标' && formData.selectedMode != '小国标'">
                <text class="label">角色信息</text>
                <el-input v-model="formData.mingwenLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入铭文等级" />
                <el-input v-model="formData.heroCount" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入英雄数量" />
                <!-- <div class="handle" @click="showRoleTypePicker">
                <div class="selected-tag">
                    {{ (formData.mingwenLevel === '' && formData.heroCount === '') ? '请输入铭文等级和英雄数量' :
                        `铭文${formData.mingwenLevel}级 英雄${formData.heroCount}个`
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>

            <!-- 当前分数 -->
            <div class="form-item"
                v-if="formData.selectedMode == '10V10排位赛' | formData.selectedMode == '巅峰赛' && formData.orderType == '全胜订单'">
                <text class="label">当前分数</text>
                <el-input v-model="formData.currentScore" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入当前分数" />
                <!-- <div class="handle" @click="showCurrentScorePicker">
                <div class="selected-tag">
                    {{ formData.currentScore === '' ? '请输入当前分数' : formData.currentScore
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>

            <!-- 代练任务（巅峰赛） -->
            <div class="form-item"
                v-if="formData.selectedMode == '巅峰赛' && formData.orderType != '全胜订单' && formData.orderType != '限时订单'">
                <text class="label">代练任务</text>
                <el-select v-model="formData.selectedbranchRoads" placeholder="请选择分路位置" size="large"
                    style="width: 200px; margin-bottom: 10px;">
                    <el-option v-for="(item, index) in branchRoadsTree" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
                <el-input v-model="formData.nowScore" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入当前分数" />
                <el-input v-model="formData.toScore" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入目标分数" />
                <!-- <div class="handle" @click="showBranchRoadsPicker">
                <div class="selected-tag">
                    {{ (selectedbranchRoads === '' && formData.nowScore === '' && formData.toScore === '') ?
                        '请选择分路位置与代练任务' :
                        `${selectedbranchRoads}${formData.nowScore}分-${formData.toScore}分` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>

            <!-- 代练任务 -->
            <div class="form-item"
                v-if="formData.orderType != '限时订单' && formData.orderType != '全胜订单' && formData.selectedMode != '巅峰赛' && formData.selectedMode != '荣耀战力' && formData.selectedMode != '大国标' && formData.selectedMode != '小国标'">
                <text class="label">代练任务</text>
                <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                    style="width: 200px;margin-bottom: 10px;" />
                <el-cascader placeholder="请选择目标段位" v-model="formData.toTask" :options="Task"
                    style="width: 200px;margin-bottom: 10px;" />
                <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <div class="selected-tag">

                    {{ (currentTask === '' && toTask === '') ? '请选择当前段位和目标段位' :
                        `${currentTask}-${toTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </div>
            </div> -->
            </div>
            <!-- 游戏账号 -->
            <div class="form-item" v-if="showOrder">
                <text class="label">游戏账号</text>
                <el-input v-model="formData.account" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入您的游戏账号" />
            </div>
            <!-- 游戏密码 -->
            <div class="form-item" v-if="showOrder">
                <text class="label">游戏密码</text>
                <el-input v-model="formData.password" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入您的游戏密码" />
            </div>
            <!-- 游戏角色 -->
            <div class="form-item" v-if="showOrder">
                <text class="label">游戏角色</text>
                <el-input v-model="formData.username" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入您的游戏角色名" />
            </div>
            <!-- 号主手机（必填） -->
            <div class="form-item" v-if="showOrder">
                <text class="label">号主手机（必填）</text>
                <el-input v-model="formData.phone" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入您的手机号" />
            </div>
            <!-- 发单者联系方式（必填） -->
            <div class="form-item" v-if="showOrder">
                <text class="label">发单者联系方式（必填）</text>
                <el-input v-model="formData.contact" style="width: 200px;height: 45px;margin-bottom: 10px;"
                    placeholder="请输入发单者的联系方式" />
            </div>
            <!-- 指定英雄（加价30%） -->
            <div class="form-item" v-if="showOrder">
                <text class="label">指定英雄（加价30%）</text>
                <el-select filterable :filter-method="heroFilterMethod" v-model="formData.hero" placeholder="请选择指定英雄"
                    size="large" style="width: 200px;margin-bottom: 10px;">
                    <el-option v-for="(item, index) in filteredHeroes" :key="index" :label="item.text"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <!-- 游戏区服选择弹窗 -->
        <el-dialog v-model="serverPopup" title="请选择游戏区服" width="1000" :before-close="hideServerPicker">
            <div class="popup-content">
                <div class="body">
                    <!-- 左侧导航栏 -->
                    <div class="popup-nav">
                        <div v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </div>
                    </div>

                    <!-- 右侧选择内容 -->
                    <div class="popup-scroll">
                        <div v-if="selectedGroupIndex !== null" class="popup-group">
                            <div v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </div>
                        </div>
                        <div v-else class="popup-empty">请选择左侧分类</div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 代练类型选择弹窗 -->
        <el-dialog v-model="modePopup" width="1000" :before-close="hideModePicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in modeTree" :key="index" class="popup-item"
                        @click="selectModeItem(item)">
                        {{ item.text }}
                    </view>
                </div>
            </view>
        </el-dialog>

        <!-- 订单类别选择弹窗 -->
        <el-dialog v-model="orderTypePopup" width="1000" :before-close="hideOrderTypePicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in orderTypeTree" :key="index" class="popup-item"
                        @click="selectOrderTypeItem(item)">
                        {{ item.text }}
                    </view>
                </div>
            </view>
        </el-dialog>

        <!-- 铭文等级和英雄数量弹窗 -->
        <el-dialog v-model="roleTypePopup" width="1000" :before-close="hideRoleTypePicker">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>铭文等级</span>
                        <input type="number" placeholder="请输入铭文等级" v-model="mingwenLevel">
                    </div>
                    <!-- TODO 铭文等级需要修改这里 -->
                    <div class="role" v-if="selectedMode != '荣耀战力' && selectedMode != '大国标' && selectedMode != '小国标'">
                        <span>英雄数量</span>
                        <input type="number" placeholder="请输入英雄数量" v-model="heroCount">
                    </div>
                </view>
            </view>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="hideRoleTypePicker">取消</el-button>
                    <el-button type="primary" @click="confirmRoleTypePicker">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 当前段位选择弹窗 -->
        <el-dialog v-model="currentTaskTypePopup" title="请选择当前段位" width="1000"
            :before-close="hideCurrentTaskTypePicker">
            <view class="popup-content">
                <div class="body">
                    <!-- 左侧导航栏 -->
                    <div scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: currentTaskGroupIndex === groupIndex }"
                            @click="selectCurrentTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </div>

                    <!-- 右侧选择内容 -->
                    <div scroll-y class="popup-scroll">
                        <view v-if="currentTaskGroupIndex !== null" class="popup-group">
                            <view v-for="(item, itemIndex) in Task[currentTaskGroupIndex].children" :key="itemIndex"
                                class="popup-item">
                                <div class="popup-item-title">{{ item.text }}</div>
                                <div class="popup-item-body">
                                    <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                        @click="selectCurrentTaskItem(item.text, item2.text)"
                                        class="popup-item-body-item">
                                        <span>{{ item2.text }}</span>
                                    </view>
                                </div>
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </div>
                </div>
            </view>
        </el-dialog>
        <!-- 目标段位选择弹窗 -->
        <el-dialog v-model="toTaskTypePopup" title="请选择目标段位" width="1000" :before-close="hideToTaskTypePicker">
            <view class="popup-content">
                <div class="body">
                    <!-- 左侧导航栏 -->
                    <div scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: toTaskGroupIndex === groupIndex }" @click="selectToTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </div>

                    <!-- 右侧选择内容 -->
                    <div scroll-y class="popup-scroll">
                        <view v-if="toTaskGroupIndex !== null" class="popup-group">
                            <view v-for="(item, itemIndex) in Task[toTaskGroupIndex].children" :key="itemIndex"
                                class="popup-item">
                                <div class="popup-item-title">{{ item.text }}</div>
                                <div class="popup-item-body">
                                    <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                        @click="selectToTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                        <span>{{ item2.text }}</span>
                                    </view>
                                </div>
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </div>
                </div>
            </view>
        </el-dialog>
        <!-- 终止时间选择器弹窗 -->
        <el-dialog v-model="endTimePopup" width="1000" :before-close="hideEndTimePicker">
            <view class="popup-content">
                <view class="time-selector">
                    <view class="time-scroll">
                        <view class="date-display">明天</view>
                    </view>
                    <div scroll-y class="time-scroll">
                        <view v-for="(item, index) in timeOptions" :key="index"
                            class="time-item {{selectedTimeIndex === index ? 'selected' : ''}}" :data-index="index"
                            @click="selectEndTime(item)">
                            {{ item }}
                        </view>
                    </div>
                </view>
            </view>
        </el-dialog>
        <!-- 订单删除时间选择器弹窗 -->
        <el-dialog v-model="orderDeleteTimePopup" width="1000" :before-close="hideOrderDeleteTimePicker">
            <view class="popup-content">
                <view class="time-selector">
                    <view class="time-scroll">
                        <view class="date-display">明天</view>
                    </view>
                    <div scroll-y class="time-scroll">
                        <view v-for="(item, index) in timeOptions" :key="index"
                            class="time-item {{selectedTimeIndex === index ? 'selected' : ''}}" :data-index="index"
                            @click="selectOrderDeleteTime(item)">
                            {{ item }}
                        </view>
                    </div>
                </view>
            </view>
        </el-dialog>
        <!-- 需打场次选择器弹窗 -->
        <el-dialog v-model="needGamesPopup" width="1000" :before-close="hideNeedGamesPicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                        @click="selectNeedGamesItem(item)">
                        {{ item.text }}
                    </view>
                </div>
            </view>
        </el-dialog>
        <!-- 当前战力和目标战力弹窗 -->
        <el-dialog v-model="powerPopup" width="1000" :before-close="hidePowerPicker">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>当前战力</span>
                        <input type="number" placeholder="请输入当前战力" v-model="currentPower">
                    </div>
                    <div class="role" v-if="selectedMode != '大国标' && selectedMode != '小国标'">
                        <span>目标战力</span>
                        <input type="number" placeholder="请输入目标战力" v-model="toPower">
                    </div>
                </view>
            </view>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="hidePowerPicker">取消</el-button>
                    <el-button type="primary" @click="confirmPowerPicker">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 英雄选择弹窗 -->
        <el-dialog v-model="heroPopup" width="1000" :before-close="hideHeroPicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in heroTree" :key="index" class="popup-item"
                        @click="selectHeroItem(item)">
                        {{ item.text }}
                    </view>
                </div>
            </view>
        </el-dialog>
        <!-- 拿标时间选择弹窗 -->
        <el-dialog v-model="bidTimePopup" width="1000" :before-close="hideBidTimePicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in bidTimeTree" :key="index" class="popup-item"
                        @click="selectBidTimeItem(item)">
                        {{ item.text }}
                    </view>
                </div>
            </view>
        </el-dialog>
        <!-- 当前分数弹窗 -->
        <el-dialog v-model="currentScorePopup" width="1000" :before-close="hideCurrentScorePicker">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>当前分数</span>
                        <input type="number" placeholder="请输入当前分数" v-model="currentScore">
                    </div>
                </view>
            </view>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="hideCurrentScorePicker">取消</el-button>
                    <el-button type="primary" @click="confirmCurrentScorePicker">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 代练任务(巅峰赛)对应选择弹窗 -->
        <!-- 分路选择弹窗 -->
        <el-dialog v-model="branchRoadsPopup" width="1000" :before-close="hideBranchRoadsPicker">
            <view class="popup-content">
                <div scroll-y class="popup-scroll">
                    <view v-for="(item, index) in branchRoadsTree" :key="index" class="popup-item"
                        @click="selectBranchRoadsItem(item)">
                        {{ item.text }}
                    </view>
                </div>
                <view class="popup-footer" @click="hideBranchRoadsPicker">取消</view>
            </view>
        </el-dialog>
        <!-- 对应分数选择弹窗 -->
        <el-dialog v-model="toScorePopup" width="1000" :before-close="hideToScorePicker">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>当前分数</span>
                        <input type="number" placeholder="请输入当前分数" v-model="nowScore">
                    </div>
                    <div class="role">
                        <span>目标分数</span>
                        <input type="number" placeholder="请输入目标分数" v-model="toScore">
                    </div>
                </view>
            </view>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="hideToScorePicker">取消</el-button>
                    <el-button type="primary" @click="confirmToScorePicker">确定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 订单信息区域 -->
        <!-- <div class="orderMsg">
        <div class="pay">
            <img src="../../assets/icons/pay.png"></img>
            <div class="text">建议出价 <span style="color: red;">87元</span></div>
        </div>
        <div class="time">
            <img src="../../assets/icons/time.png"></img>
            <div class="text">预计时限 <span style="color: red;">47小时</span></div>
        </div>
    </div> -->
        <!-- 底部按钮 -->
        <!-- <div class="footer">
        <div class="button" @click="submitOrder()">下一步</div>
    </div> -->
        <div class="special-task" @click="changeShowOrder" v-if="!showOrder">
            <div class="label">预约下单</div>
        </div>
        <DLWZsubmitOrder v-if="showOrder" :formDataInput="formData"></DLWZsubmitOrder>
    </div>
</template>
<script>
import DLWZsubmitOrder from '../../views/DL/WZsubmitOrder/index.vue';
import { pinyin } from 'pinyin-pro';

export default {
    name: 'WZDL',
    components: {
        DLWZsubmitOrder
    },
    data() {
        return {
            showOrder: false,
            // 区服数据
            serverTree: [
                {
                    label: '安卓QQ',
                    value: "安卓QQ",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '安卓WX',
                    value: "安卓WX",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '苹果QQ',
                    value: "苹果QQ",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    label: '苹果WX',
                    value: "苹果WX",
                    children: [
                        { label: '默认服', value: "默认服" },
                        { label: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            label: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
            ],
            selectedServer: "默认服",
            selectedGroupIndex: 0,
            serverPopup: false,
            // 代练类型数据
            modeTree: [
                { text: '5V5排位赛', value: "5V5排位赛" },
                { text: '10V10排位赛', value: "10V10排位赛" },
                { text: '巅峰赛', value: "巅峰赛" },
                { text: '荣耀战力', value: "荣耀战力" },
                { text: '大国标', value: "大国标" },
                { text: '小国标', value: "小国标" },
            ],
            selectedMode: "5V5排位赛",
            modePopup: false,
            // 订单类别数据
            orderTypeTree: [
                { text: '普通订单', value: "普通订单" },
                { text: '限时订单', value: "限时订单" },
                { text: '全胜订单', value: "全胜订单" },
            ],
            orderType: "普通订单",
            orderTypePopup: false,
            // 英雄数据
            heroTree: [
                { text: "澜", value: "澜" }, { text: "夏洛特", value: "夏洛特" }, { text: "阿古朵", value: "阿古朵" },
                { text: "蒙恬", value: "蒙恬" }, { text: "镜", value: "镜" }, { text: "蒙犽", value: "蒙犽" },
                { text: "鲁班大师", value: "鲁班大师" }, { text: "西施", value: "西施" }, { text: "马超", value: "马超" },
                { text: "曜", value: "曜" }, { text: "云中君", value: "云中君" }, { text: "瑶", value: "瑶" },
                { text: "盘古", value: "盘古" }, { text: "猪八戒", value: "猪八戒" }, { text: "嫦娥", value: "嫦娥" },
                { text: "上官婉儿", value: "上官婉儿" }, { text: "李信", value: "李信" }, { text: "沈梦溪", value: "沈梦溪" },
                { text: "伽罗", value: "伽罗" }, { text: "盾山", value: "盾山" }, { text: "司马懿", value: "司马懿" },
                { text: "孙策", value: "孙策" }, { text: "元歌", value: "元歌" }, { text: "米莱狄", value: "米莱狄" },
                { text: "狂铁", value: "狂铁" }, { text: "弈星", value: "弈星" }, { text: "裴擒虎", value: "裴擒虎" },
                { text: "杨玉环", value: "杨玉环" }, { text: "公孙离", value: "公孙离" }, { text: "明世隐", value: "明世隐" },
                { text: "女娲", value: "女娲" }, { text: "梦奇", value: "梦奇" }, { text: "苏烈", value: "苏烈" },
                { text: "百里玄策", value: "百里玄策" }, { text: "百里守约", value: "百里守约" }, { text: "铠", value: "铠" },
                { text: "鬼谷子", value: "鬼谷子" }, { text: "干将莫邪", value: "干将莫邪" }, { text: "东皇太一", value: "东皇太一" },
                { text: "大乔", value: "大乔" }, { text: "黄忠", value: "黄忠" }, { text: "诸葛亮", value: "诸葛亮" },
                { text: "哪吒", value: "哪吒" }, { text: "太乙真人", value: "太乙真人" }, { text: "蔡文姬", value: "蔡文姬" },
                { text: "雅典娜", value: "雅典娜" }, { text: "杨戬", value: "杨戬" }, { text: "苍", value: "苍" },
                { text: "钟馗", value: "钟馗" }, { text: "虞姬", value: "虞姬" }, { text: "李元芳", value: "李元芳" },
                { text: "张飞", value: "张飞" }, { text: "刘备", value: "刘备" }, { text: "后羿", value: "后羿" },
                { text: "牛魔", value: "牛魔" }, { text: "孙悟空", value: "孙悟空" }, { text: "亚瑟", value: "亚瑟" },
                { text: "橘右京", value: "橘右京" }, { text: "娜可露露", value: "娜可露露" }, { text: "不知火舞", value: "不知火舞" },
                { text: "张良", value: "张良" }, { text: "花木兰", value: "花木兰" }, { text: "兰陵王", value: "兰陵王" },
                { text: "王昭君", value: "王昭君" }, { text: "韩信", value: "韩信" }, { text: "刘邦", value: "刘邦" },
                { text: "姜子牙", value: "姜子牙" }, { text: "露娜", value: "露娜" }, { text: "程咬金", value: "程咬金" },
                { text: "安琪拉", value: "安琪拉" }, { text: "貂蝉", value: "貂蝉" }, { text: "关羽", value: "关羽" },
                { text: "老夫子", value: "老夫子" }, { text: "武则天", value: "武则天" }, { text: "项羽", value: "项羽" },
                { text: "达摩", value: "达摩" }, { text: "狄仁杰", value: "狄仁杰" }, { text: "马可波罗", value: "马可波罗" },
                { text: "李白", value: "李白" }, { text: "宫本武藏", value: "宫本武藏" }, { text: "典韦", value: "典韦" },
                { text: "曹操", value: "曹操" }, { text: "甄姬", value: "甄姬" }, { text: "夏侯惇", value: "夏侯惇" },
                { text: "周瑜", value: "周瑜" }, { text: "吕布", value: "吕布" }, { text: "芈月", value: "芈月" },
                { text: "白起", value: "白起" }, { text: "扁鹊", value: "扁鹊" }, { text: "孙膑", value: "孙膑" },
                { text: "钟无艳", value: "钟无艳" }, { text: "阿轲", value: "阿轲" }, { text: "高渐离", value: "高渐离" },
                { text: "刘禅", value: "刘禅" }, { text: "庄周", value: "庄周" }, { text: "鲁班七号", value: "鲁班七号" },
                { text: "孙尚香", value: "孙尚香" }, { text: "嬴政", value: "嬴政" }, { text: "妲己", value: "妲己" },
                { text: "墨子", value: "墨子" }, { text: "赵云", value: "赵云" }, { text: "小乔", value: "小乔" },
                { text: "廉颇", value: "廉颇" }, { text: "艾琳", value: "艾琳" }, { text: "云缨", value: "云缨" },
                { text: "金蝉", value: "金蝉" }, { text: "司空震", value: "司空震" }, { text: "暃", value: "暃" },
                { text: "桑启", value: "桑启" }, { text: "戈娅", value: "戈娅" }, { text: "海月", value: "海月" },
                { text: "赵怀真", value: "赵怀真" }, { text: "莱西奥", value: "莱西奥" }, { text: "姬小满", value: "姬小满" },
                { text: "亚连", value: "亚连" }, { text: "朵莉亚", value: "朵莉亚" }, { text: "海诺", value: "海诺" },
                { text: "敖隐", value: "敖隐" }, { text: "大司命", value: "大司命" }, { text: "元流之子(战)", value: "元流之子(战)" },
                { text: "元流之子(法)", value: "元流之子(法)" }, { text: "少司缘", value: "少司缘" }, { text: "影", value: "影" },
                { text: "空空儿", value: "空空儿" }, { text: "元流之子（射手）", value: "元流之子（射手）" }
            ],
            hero: "澜",
            searchQuery: '',
            heroPopup: false,
            // 拿标时间数据
            bidTimeTree: [],
            selectedBidTime: "",
            bidTimePopup: false,
            // 铭文&英雄数量
            mingwenLevel: '',
            heroCount: '',
            roleTypePopup: false,
            // 战力
            currentPower: '',
            toPower: '',
            powerPopup: false,
            // 当前分数
            currentScore: '',
            currentScorePopup: false,
            // 巅峰赛分路
            branchRoadsTree: [
                { text: '对抗路', value: "对抗路" }, { text: '游走', value: "游走" },
                { text: '中路', value: "中路" }, { text: '发育路', value: "发育路" },
                { text: '打野', value: "打野" },
            ],
            selectedbranchRoads: "",
            branchRoadsPopup: false,
            // 巅峰赛分数
            toScore: '',
            nowScore: '',
            toScorePopup: false,
            // 段位任务
            Task: [],
            currentTask: "",
            currentTaskGroupIndex: 0,
            currentTaskTypePopup: false,
            toTask: "",
            toTaskGroupIndex: 0,
            toTaskTypePopup: false,
            // 时间选择
            endTime: "",
            tomorrow: "",
            today: "",
            timeOptions: [],
            endTimePopup: false,
            selectedTimeIndex: null, // For highlighting selected time
            // 订单删除时间
            orderDeleteTime: "",
            orderDeleteTimePopup: false,
            // 需打场次
            needGamesTree: [
                { text: '5场', value: "5场" }, { text: '6场', value: "6场" },
                { text: '7场', value: "7场" }, { text: '8场', value: "8场" },
                { text: '9场', value: "9场" }, { text: '10场', value: "10场" },
            ],
            needGames: "",
            needGamesPopup: false,
            // 订单提交数据
            formData: {
                server: '',
                mode: '',
                orderType: '',
                mingwenLevel: '',
                heroCount: '',
                currentPower: '',
                toPower: '',
                currentScore: '',
                branchRoads: '',
                nowScore: '',
                toScore: '',
                currentTask: '',
                toTask: '',
                needGames: '',
                endTime: '',
                orderDeleteTime: '',
                hero: '',
                selectedBidTime: '',
                selectedbranchRoads: '',
                account: '',
                password: '',
                username: '',
                phone: '',
                contact: '',
                // Added missing fields from template
                selectedServer: '', // For el-cascader binding
                selectedMode: '', // For el-select binding
            },
        };
    },
    computed: {
        // 动态计算过滤后的列表
        filteredHeroes() {
            if (!this.searchQuery) return this.heroTree;

            const query = this.searchQuery.toLowerCase();
            return this.heroTree.filter(item => {
                const textMatch = item.text.toLowerCase().includes(query);
                const pinyinInitials = pinyin(item.text, {
                    pattern: 'first',
                    type: 'array',
                    toneType: 'none'
                }).join('').toLowerCase();
                return textMatch || pinyinInitials.includes(query);
            });
        }
    },
    methods: {
        changeShowOrder() {
            this.showOrder = !this.showOrder;
        },
        // 区服选择
        showServerPicker() {
            this.serverPopup = true;
        },
        hideServerPicker() {
            this.serverPopup = false;
        },
        selectGroup(index) {
            this.selectedGroupIndex = index;
        },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
        },
        // 代练类型选择
        showModePicker() {
            this.modePopup = true;
        },
        hideModePicker() {
            this.modePopup = false;
        },
        selectModeItem(item) {
            this.selectedMode = item.text;
            this.hideModePicker();
        },
        // 订单类别选择
        showOrderTypePicker() {
            this.orderTypePopup = true;
        },
        hideOrderTypePicker() {
            this.orderTypePopup = false;
        },
        selectOrderTypeItem(item) {
            this.orderType = item.text;
            this.hideOrderTypePicker();
        },
        // 英雄筛选与选择
        heroFilterMethod(val) {
            this.searchQuery = val;
        },
        showHeroPicker() {
            this.heroPopup = true;
        },
        hideHeroPicker() {
            this.heroPopup = false;
        },
        selectHeroItem(item) {
            this.hero = item.text;
            this.hideHeroPicker();
        },
        // 拿标时间选择
        initBidTimeOptions() {
            const now = new Date();
            const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
            const nextMonthValue = `${nextMonth.getMonth() + 1}月1日`;
            const nextNextMonth = new Date(now.getFullYear(), now.getMonth() + 2, 1);
            const nextNextMonthValue = `${nextNextMonth.getMonth() + 1}月1日`;
            this.bidTimeTree = [
                { text: nextMonthValue, value: nextMonthValue },
                { text: nextNextMonthValue, value: nextNextMonthValue }
            ];
        },
        showBidTimePicker() {
            this.bidTimePopup = true;
        },
        hideBidTimePicker() {
            this.bidTimePopup = false;
        },
        selectBidTimeItem(item) {
            this.selectedBidTime = item.text;
            this.hideBidTimePicker();
        },
        // 铭文选择区域
        showRoleTypePicker() {
            this.roleTypePopup = true;
        },
        hideRoleTypePicker() {
            this.roleTypePopup = false;
        },
        confirmRoleTypePicker() {
            this.formData.mingwenLevel = this.mingwenLevel;
            this.formData.heroCount = this.heroCount;
            this.roleTypePopup = false;
        },
        // 战力选择区域
        showPowerPicker() {
            this.powerPopup = true;
        },
        hidePowerPicker() {
            this.currentPower = '';
            this.toPower = '';
            this.powerPopup = false;
        },
        confirmPowerPicker() {
            this.formData.currentPower = this.currentPower;
            this.formData.toPower = this.toPower;
            this.powerPopup = false;
        },
        // 当前分数区域
        showCurrentScorePicker() {
            this.currentScorePopup = true;
        },
        hideCurrentScorePicker() {
            this.currentScore = '';
            this.currentScorePopup = false;
        },
        confirmCurrentScorePicker() {
            this.formData.currentScore = this.currentScore;
            this.currentScorePopup = false;
        },
        // 代练任务（巅峰赛）选择弹窗
        showBranchRoadsPicker() {
            this.branchRoadsPopup = true;
        },
        hideBranchRoadsPicker() {
            this.branchRoadsPopup = false;
        },
        selectBranchRoadsItem(item) {
            this.selectedbranchRoads = item.text;
            this.hideBranchRoadsPicker();
            this.showToScorePicker();
        },
        // 对应分数选择弹窗
        showToScorePicker() {
            this.toScorePopup = true;
        },
        hideToScorePicker() {
            this.toScore = '';
            this.nowScore = '';
            this.toScorePopup = false;
        },
        confirmToScorePicker() {
            this.formData.nowScore = this.nowScore;
            this.formData.toScore = this.toScore;
            this.toScorePopup = false;
        },
        // 代练任务选择弹窗
        createTaskList() {
            const tiers = ['黑铁', '青铜', '白银', '黄金', '铂金', '翡翠', '钻石', '大师'];
            const taskList = [];
            tiers.forEach(tier => {
                let tierItem = { label: tier, value: tier, children: [] };
                let subTierItem = { label: `${tier}`, value: `${tier}`, children: [] };
                const stars = Array.from({ length: 5 }, (_, index) => ({ label: `${index}`, value: `${index}` }));
                subTierItem.children = stars;
                tierItem.children.push(subTierItem);
                taskList.push(tierItem);
            });
            this.Task = taskList;
        },
        selectCurrentTaskGroup(index) {
            this.currentTaskGroupIndex = index;
        },
        selectCurrentTaskItem(text1, text2) {
            this.currentTask = `${text1} ${text2}`;
            this.hideCurrentTaskTypePicker();
            // TODO 当前段位需要修改这里
            if (this.orderType != '限时订单' && this.orderType != '全胜订单' && this.selectedMode != '荣耀战力' && this.selectedMode != '大国标' && this.selectedMode != '小国标') {
                this.showToTaskTypePicker();
            }
        },
        showCurrentTaskTypePicker() {
            this.currentTaskTypePopup = true;
        },
        hideCurrentTaskTypePicker() {
            this.currentTaskTypePopup = false;
        },
        // 选择目标段位弹窗
        selectToTaskGroup(index) {
            this.toTaskGroupIndex = index;
        },
        selectToTaskItem(text1, text2) {
            this.toTask = `${text1} ${text2}`;
            this.hideToTaskTypePicker();
        },
        showToTaskTypePicker() {
            this.toTaskTypePopup = true;
        },
        hideToTaskTypePicker() {
            this.toTaskTypePopup = false;
        },
        // 终止时间弹窗
        initTimeOptions() {
            const now = new Date();
            let arr = [];
            for (let i = now.getHours(); i < 24; i++) { // 修正：从当前小时开始
                arr.push(`${i.toString().padStart(2, '0')}:00`);
            }
            // 添加明天的00:00到23:00
            for (let i = 0; i < 24; i++) {
                arr.push(`${i.toString().padStart(2, '0')}:00`);
            }
            this.timeOptions = arr;
            console.log(this.timeOptions);
        },
        showEndTimePicker() {
            this.endTimePopup = true;
        },
        hideEndTimePicker() {
            this.endTimePopup = false;
        },
        selectEndTime(time) {
            this.endTime = time;
            this.calculateTomorrow();
            this.hideEndTimePicker();
            console.log("选择的时间", this.endTime);
        },
        clearTime() {
            this.endTime = '';
        },
        calculateTomorrow() {
            const now = new Date();
            now.setDate(now.getDate() + 1); // 修正：实际增加一天
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            this.tomorrow = `${month}月${day}日`; // 修正：使用完整日期格式
            console.log(this.tomorrow);
        },
        // 订单删除时间弹窗
        showOrderDeleteTimePicker() {
            this.orderDeleteTimePopup = true;
        },
        hideOrderDeleteTimePicker() {
            this.orderDeleteTimePopup = false;
        },
        selectOrderDeleteTime(time) {
            this.orderDeleteTime = time;
            this.calculateTomorrow();
            this.hideOrderDeleteTimePicker();
            console.log("选择的时间", this.orderDeleteTime);
        },
        // 需打场次树形数据
        selectNeedGamesItem(item) {
            this.needGames = item.text;
            this.hideNeedGamesPicker();
        },
        showNeedGamesPicker() {
            this.needGamesPopup = true;
        },
        hideNeedGamesPicker() {
            this.needGamesPopup = false;
        },
        // 订单提交
        submitOrder() {
            this.formData = {
                server: `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`,
                mode: this.selectedMode,
                orderType: this.orderType,
                mingwenLevel: this.mingwenLevel,
                heroCount: this.heroCount,
                currentPower: this.currentPower,
                toPower: this.toPower,
                currentScore: this.currentScore,
                branchRoads: this.selectedbranchRoads,
                nowScore: this.nowScore,
                toScore: this.toScore,
                currentTask: this.currentTask,
                toTask: this.toTask,
                needGames: this.needGames,
                endTime: `${this.tomorrow} ${this.endTime}`,
                orderDeleteTime: `${this.tomorrow} ${this.orderDeleteTime}`,
                hero: this.hero,
                selectedBidTime: this.selectedBidTime,
                selectedbranchRoads: this.selectedbranchRoads,
            };
            console.log("提交订单1", this.formData);
            this.$router.push({
                path: "/DL/WZsubmitOrder",
                query: { formData: JSON.stringify(this.formData) }
            });
        }
    },
    mounted() {
        this.createTaskList();
        this.initBidTimeOptions()

    },
    // setup() {
    //     const router = useRouter();
    //     return { router };
    // }
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
    height: 45px;
}


.special-task {
    width: 40%;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* margin-top: 5px; */
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: 50px auto;
    /* margin-left: 20px; */
}


.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}

/* 表单样式 */
.form {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #fff;
}

.form-item {
    width: 20%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.form-item .label {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}

.form-item .handle {
    width: 70%;

}

.picker,
.input {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.selected-tag img {
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    border: 1px solid #ccc;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 40px;
}

.picker {
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus {
    border-color: #388aff;
    box-shadow: 0 0 10px rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.time-selector {
    display: flex;
    align-items: center;
}

.time-scroll {
    overflow-y: auto;
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.time-scroll .date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #333;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item {
    cursor: pointer;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item.selected {
    color: #4080ff;
    font-weight: bold;
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    width: 70%;
    outline: none;
    border: none;
    font-size: 20px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
}

.popup-content .body {
    display: flex;
    height: 500px;
}

.popup-nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    /* 根据需要调整宽度 */
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.nav-item {
    padding: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

.nav-item.active {
    color: #388aff;
    font-weight: bold;
    border-left: 4px solid #388aff;
    padding-left: 16px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: #999;
}

.popup-group {
    margin-bottom: 20px;
    max-height: 100%;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    box-sizing: border-box;

}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.orderMsg {
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 200px;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay img,
.orderMsg .time img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 20px;
    font-weight: 700;
}

.footer {
    width: 60%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 25px;
}

.footer .tip {
    width: 100%;
    color: #aaa;
    background-color: #eee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button {
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all .3s;
}

.footer .button:hover {
    background: #3e91ff;
    cursor: pointer;
}
</style>